<template>
  <div class="hello">
		<el-radio-group v-model="radio">
    <el-radio :label="3">备选项</el-radio>
    <el-radio :label="6">备选项</el-radio>
    <el-radio :label="9">备选项</el-radio>
  </el-radio-group>
		
		<!-- <el-button class="img" type="text">
			<img src="../assets/logo.png" @click="check($event)" />
			<img :src="srcs" @click="check($event)" />
		</el-button>
		
		
		
		<el-dialog title="图片裁剪" :visible.sync="dialogVisible" width="60%">
			 <div class="jianqie">
				 <vueCropper ref="cropper" :img="imgurl" :canScale="false" @real-time="realTime" :info="false" :autoCrop="true"></vueCropper>
			 </div>
			 <span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="ok">确 定</el-button>
			 </span>
		</el-dialog>
		
		<div class="prewArea" :style="previewStyleBig">
            <div :style="previews.div" class="preview">
              <img :src="previews.url" :style="previews.img">
            </div>
        </div>
 -->
		
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
			radio:3,
			dialogVisible:true,
			imgurl:"../../static/img/1.jpg",
		previewStyle: {
          'width': '230px',
          'max-height': '230px',
          'overflow': 'hidden',
          'zoom': '0.75'
        },
        previewStyleBig: {
          'overflow': 'hidden',
          'zoom': '0.23'
        },
        fileList: [], // 用来存放图片（用来装饰）
        previews: {},
		srcs:"../../static/img/1.jpg"
    }
  },
	created() {
		this.radio = 6
	},
	methods:{
		check:function(e){
			this.dialogVisible = true
			this.imgurl = e.target.src
			console.log(e.target.src)
		},
		ok:function(){
			this.$refs.cropper.getCropBlob((data) => {
			  // do something
			  console.log(data)  
			  this.srcs = data
// 				  var aLink = document.createElement('a')
// 				  aLink.download = 'demos'
// 				  aLink.downImg = window.URL.createObjectURL(data)
// 				  aLink.href = window.URL.createObjectURL(data)
// 				  aLink.click()
// 
			})
			
// 			this.$refs.cropper.getCropData((data) => {
// 			  // do something
// 			  console.log(data)  
// 			  
// 				  var aLink = document.createElement('a')
// 				  aLink.download = 'demos2'
// 				  aLink.downImg = data
// 				  aLink.href = data
// 				  aLink.click()
// 			
// 			})
		},
		realTime(data) {
			this.previews = {
			  ...data
			};
		  },

	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>
